<template>
  <div class="box">
    <el-divider content-position="center">用药</el-divider>
    <div class="box-info">
      <div class="info-box">
        <span>患病的 :</span>&nbsp;&nbsp;
        <span>{{ info.illDayNum ? '第' + info.illDayNum + '天' : '无' }}</span>
      </div>
    </div>
    <el-divider content-position="center">口服</el-divider>
    <div v-for="(item,index) in info.takeOrallyArr" :key="index" v-if="info.takeOrallyDetail">
      <div class="box-info">
        <div class="info-box">
          <span>用药名称 :</span>&nbsp;&nbsp;
          <span>{{ item.name ? item.name : '无' }}</span>
        </div>
        <div class="info-box">
          <span>用药时间 :</span>&nbsp;&nbsp;
          <div class="box-border">{{ item.time ? item.time : '无' }}</div>
        </div>
        <div class="info-box">
          <span>日用药次数 :</span>&nbsp;&nbsp;
          <span>{{ item.num ? item.num + '次' : '无' }}</span>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>单次药量 :</span>&nbsp;&nbsp;
          <span>{{ item.medicalWeight ? item.medicalWeight + 'ml' : '无' }}</span>
        </div>
        <div class="info-box">
          <span>已用药天数 :</span>&nbsp;&nbsp;
          <span>{{ item.useDay ? item.useDay + '天' : '无' }}</span>

        </div>
        <div class="info-box">
          <span>药品图片 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.imageUrl&&item.imageUrl.length>0">
            <el-image :src="item.imageUrl[0].url" style="width: 100%;height: 100%"></el-image>
          </div>
          <div v-else>无</div>
        </div>
      </div>
    </div>

    <div v-if="!info.takeOrallyDetail">
      <div class="box-info">
        <div class="info-box">
          <span>用药名称 :</span>&nbsp;&nbsp;
          <span>无</span>
        </div>
        <div class="info-box">
          <span>用药时间 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
        <div class="info-box">
          <span>日用药次数 :</span>&nbsp;&nbsp;
          <span>无</span>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>单次药量 :</span>&nbsp;&nbsp;
          <span>无</span>
        </div>
        <div class="info-box">
          <span>已用药天数 :</span>&nbsp;&nbsp;
          <span>无</span>

        </div>
        <div class="info-box">
          <span>药品图片 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
    </div>

    <el-divider content-position="center">静脉</el-divider>
    <div v-for="(item,index) in info.intravenousDripArr" :key="index" v-if="info.intravenousDripDetail">
      <div class="box-info">
        <div class="info-box">
          <span>用药名称 :</span>&nbsp;&nbsp;
          <span>{{ item.name ? item.name : '无' }}</span>
        </div>
        <div class="info-box">
          <span>用药时间 :</span>&nbsp;&nbsp;
          <div>
            {{ item.time ? item.time : '无' }}
          </div>
        </div>
        <div class="info-box">
          <span>日用药次数 :</span>&nbsp;&nbsp;
          <span>{{ item.num ? item.num + '次' : '无' }}</span>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>单次药量 :</span>&nbsp;&nbsp;
          <span>{{ item.medicalWeight ? item.medicalWeight + 'ml' : '无' }}</span>
        </div>
        <div class="info-box">
          <span>已用药天数 :</span>&nbsp;&nbsp;
          <span>{{ item.useDay ? item.useDay + '天' : '无' }}</span>

        </div>
        <div class="info-box">
          <span>用药途径 :</span>&nbsp;&nbsp;
          <span>{{ item.useWay === 1 ? '口服' : item.useWay === 2 ? '静滴' : item.useWay === 3 ? '静推' : '无' }}</span>

        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>药品图片 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.imageUrl&&item.imageUrl.length>0">
            <el-image :src="item.imageUrl[0].url" style="height: 100%;width: 100%"></el-image>
          </div>
          <div v-else>无</div>
        </div>
      </div>
    </div>

    <div v-if="!info.intravenousDripDetail">
      <div class="box-info">
        <div class="info-box">
          <span>用药名称 :</span>&nbsp;&nbsp;
          <span>无</span>
        </div>
        <div class="info-box">
          <span>用药时间 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
        <div class="info-box">
          <span>日用药次数 :</span>&nbsp;&nbsp;
          <span>无</span>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>单次药量 :</span>&nbsp;&nbsp;
          <span>无</span>
        </div>
        <div class="info-box">
          <span>已用药天数 :</span>&nbsp;&nbsp;
          <span>无</span>

        </div>
        <div class="info-box">
          <span>用药途径 :</span>&nbsp;&nbsp;
          <span>无</span>

        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>药品图片 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
    </div>


    <el-divider content-position="center">雾化</el-divider>

    <div v-for="(item,index) in info.atomizationArr" :key="index" v-if="info.atomizationDetail">
      <div class="box-info">
        <div class="info-box">
          <span>用药名称 :</span>&nbsp;&nbsp;
          <span> {{ item.name ? item.name : '无' }}</span>
        </div>
        <div class="info-box">
          <span>用药时间 :</span>&nbsp;&nbsp;
          <div class="box-border">
            {{ item.time ? item.time : '无' }}
          </div>
        </div>
        <div class="info-box">
          <span>日用药次数 :</span>&nbsp;&nbsp;
          <span>{{ item.num ? item.num + '次' : '无' }}</span>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>单次药量 :</span>&nbsp;&nbsp;
          <span>{{ item.medicalWeight ? item.medicalWeight + 'ml' : '无' }}</span>
        </div>
        <div class="info-box">
          <span>已用药天数 :</span>&nbsp;&nbsp;
          <span>{{ item.useDay ? item.useDay + '天' : '无' }}</span>

        </div>
        <div class="info-box">
          <span>药品图片 :</span>&nbsp;&nbsp;
          <div class="box-image" v-if="item.imageUrl&&item.imageUrl.length>0">
            <el-image :src="item.imageUrl[0].url" style="height: 100%;width: 100%"></el-image>
          </div>
          <div v-else>无</div>
        </div>
      </div>
    </div>

    <div v-if="!info.atomizationDetail">
      <div class="box-info">
        <div class="info-box">
          <span>用药名称 :</span>&nbsp;&nbsp;
          <span>无</span>
        </div>
        <div class="info-box">
          <span>用药时间 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
        <div class="info-box">
          <span>日用药次数 :</span>&nbsp;&nbsp;
          <span>无</span>
        </div>
      </div>
      <div class="box-info">
        <div class="info-box">
          <span>单次药量 :</span>&nbsp;&nbsp;
          <span>无</span>
        </div>
        <div class="info-box">
          <span>已用药天数 :</span>&nbsp;&nbsp;
          <span>无</span>

        </div>
        <div class="info-box">
          <span>药品图片 :</span>&nbsp;&nbsp;
          <div>无</div>
        </div>
      </div>
    </div>

    <el-divider content-position="center">补充</el-divider>
    <div class="box-info">
      <div class="info-box">
        <span>其他医院就诊病例 :</span>&nbsp;&nbsp;
        <div class="box-image" v-if="info.otherMedicalHistoryArr&&info.otherMedicalHistoryArr.length>0">
          <el-image :src="info.otherMedicalHistoryArr[0].url" style="height: 100%;width: 100%"></el-image>
        </div>
        <div v-else>无</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {}
  },
  props: ['info'],
  watch: {
    info(item1, item2) {
      console.log((item1.otherMedicalHistoryArr[0]).url)
    }
  }
}
</script>

<style scoped lang="less">
.box {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  color: #0c4070;

  .box-info {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .info-box {
      width: 33%;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      box-sizing: border-box;

      //.box-border {
      //  padding: 5px 10px;
      //  box-sizing: border-box;
      //  border: 1px solid #ccc;
      //  display: flex;
      //  align-items: center;
      //  justify-content: center;
      //}

      .box-image {
        width: 50px;
        height: 50px;
        background-color: #d9d9d9;
      }
    }
  }
}
</style>
